@import "/src/styles/variables";

$smallPicWidth: 110px;

.fourth-recommend-container {
  margin-bottom: $marginBottomTags;
  @include tagsBasicStyle;

  &:hover ::after {
    width: 70px;
  }

  & > h2 {
    @include hotTagsH2;
  }

  .top {
    width: 100%;
    height: 180px;
    margin-bottom: 10px;
    position: relative;
    cursor: pointer;
    @include scaleImg;

    h2 {
      @include textOneLine;
      @include h2InImg;
    }
  }

  ul {

    li {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

      .left-img {
        width: $smallPicWidth;
        height: 75px;
        @include scaleImg;
      }

      .right-info {
        width: calc(100% - #{$smallPicWidth + 10});

        p {
          padding-top: 5px;
          margin-bottom: 10px;
          color: $textColor2;
          font-size: 14px;
          @include textNumberLine(2);

          &:hover {
            cursor: pointer;
            color: $textHoverColor2;
          }
        }

        div {
          color: $textColor4;
          font-size: 12px;
        }

      }
    }
  }

}
